<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        .layui-form-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding-right: 10px;
            line-height: 38px;
        }


        .layui-tab-content {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .user-info > li {
            margin: 20px 5px;
            display: flex;
            flex-direction: row;
            justify-content: left;
        }

        .user-info > li > span {
            margin-left: 20px;
            text-align: left;
        }

        .user-info > li > label {
            margin-left: 20px;
            text-align: left;
        }


    </style>
</head>
<body>
<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs8" >
            <div class="layui-card drop-shadow">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">修改密码</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">用户名:</label>
                                        <div class="layui-input-inline">
                                            <input name="username" autocomplete="off" class="layui-input"
                                                   id="username" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form layuimini-form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label required">旧密码:</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="old_password" lay-verify="required"
                                                       placeholder="请输入旧的密码" value=""
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label required">新密码:</label>
                                            <div class="layui-input-inline">
                                                <input type="password" id="new_password" name="new_password"
                                                       lay-verify="required"
                                                       placeholder="请输入新的密码" value=""
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label required">确认密码:</label>
                                            <div class="layui-input-inline">
                                                <input type="password" id="again_password"
                                                       lay-verify="required|confirmPassword"
                                                       placeholder="请输入确认密码" value=""
                                                       class="layui-input">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <button class="layui-btn layui-btn-normal layui-bg-green" lay-submit
                                                    lay-filter="updatePwdBtn">
                                                确认保存
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>

    layui.use(['form', 'layer','jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        let user = sessionStorage.getItem('user');
        //解析用户对象
        user = JSON.parse(user);
        // 自定义验证规则
        form.verify({
            // 确认密码
            confirmPassword: function (value, item) {
                var passwordValue = $('#new_password').val();
                if (value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            }
        });

        if ($.isEmptyObject(user)) {
            //跳回登录界面
            window.parent.location.replace("login.html");
        } else {
            //调用函数获取其他值
            $("#username").val(user.username);
        }

        //修改密码
        form.on('submit(updatePwdBtn)',function(data){
            var field = data.field; // 获取表单字段值
            console.log(field)
            field.id = user.id;
            // 此处可执行 Ajax 等操作 (请求后台接口)
            $.get("http://localhost:80/admin/updatePassword",field,function(resp){
                if(resp.success){
                    layer.msg(resp.msg, {icon: 6});
                    setTimeout(()=>{
                        //清除缓存
                        window.sessionStorage.clear();
                        window.parent.location.replace("/login.html");},2000);
                }else{
                    layer.msg(resp.msg, {icon: 5});
                }
            })
            return false; // 阻止默认 form 跳转
        })

    });


</script>
</body>
</html>